<div class="">
  <div>{{title}}</div>
  <div>{{content}}</div>

  <form #f="ngForm" novalidate (ngSubmit)="onSubmit(f)">
    <!-- 表单验证的几种方式 -->
    <!-- 方式一：f.controls.name?.errors -->
    <!-- <div class="form-group">
      <label>名字</label>
      <input type="text" class="form-control" name="name" [(ngModel)]="user.name" required>
    </div>
    <div class="error" *ngIf="f.controls.name?.errors">名字是必须的</div> -->

    <!-- 方式二: #userName="ngModel" -->
    <div class="form-group">
      <label>名字</label>
      <input type="text" class="form-control" name="name" [(ngModel)]="user.name" #userName="ngModel" required>
    </div>
      <!-- 为了避免一开始就显示异常信息:  userName.touched-->
    <div class="error" *ngIf="userName.errors?.required && userName.touched">名字是必须的</div>

    <div class="form-group">
      <label>年龄</label>
      <input type="number" class="form-control" name="age" [(ngModel)]="user.age">
    </div>
    <div class="form-group">
      <label for="">性别</label>
      <label for="" *ngFor="let gender of genders;">
        <input type="radio" name="gender" [(ngModel)]="user.gender" [value]="gender.value">
        {{gender.display}}
      </label>
    </div>
    <div class="form-group">
      <label>角色</label>
      <select name="role" class="form-control" [(ngModel)]="user.role">
        <!-- tips: 用[value] 取代[ngModel],  ngModel会报错; -->
          <option *ngFor="let role of roles" [value]="role.value">{{role.display}}</option>
          <!-- <option *ngFor="let role of roles" [ngModel]="role.value">{{role.display}}</option> -->
        </select>
    </div>
    <div class="form-group">
      <label for="">主题</label>
      <select name="theme" class="form-control" [(ngModel)]="user.theme">
        <!-- ngValue & value: 在select组件中,对于option选项，每一项的绑定值,简单值时可以绑定到value,值为对象时可以绑定到ngValue -->
        <option *ngFor="let theme of themes" [ngValue]="theme">
          {{theme.display}}
        </option>
      </select>
    </div>
    <div class="form-group">
      <div class="checkbox">
        <label for="">
          <input type="checkbox" name="isActive" [(ngModel)]="user.isActive">
          是否激活
        </label>
      </div>
    </div>
    <div class="form-group">
      <label for="">话题</label>
      <select name="topics" multiple class="form-control" [(ngModel)]="user.topics">
        <option *ngFor="let topic of topics" [value]="topic.value">{{topic.display}}</option>
      </select>
    </div>
    <div class="form-group">
      <label for="">爱好</label>
      <span *ngFor="let hobby of hobbies">
        <input type="checkbox" name="hobby" [value]="hobby.value" [checked]="user.hobbies[hobby.value]" (change)="changeHobby(hobby, $event)">
        {{hobby.display}}
      </span>
    </div>
    <div class="form-group">
      <label for="">地址</label>
      <select name="province"class="form-control" [(ngModel)]="user.province"
        (change)="changeProvince($event.target.value)">
        <option *ngFor="let province of provinces" [value]="province.pk">{{province.pv}}</option>
      </select>
      <select name="city" class="form-control" [(ngModel)]="user.city">
        <option *ngFor="let city of cities" [value]="city.ck">{{city.cv}}</option>
      </select>
    </div>
    <button type="submit" [disabled]="f.invalid" (click)="save()" class="btn btn-default">保存</button>
  </form>
</div>
